﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
        }

        /*整个表单应用样式*/
        form {
            font-size: 1.4em;
            width: 40em;
        }
        /* fieldset 设置样式 */
        fieldset {
            margin: 1em 0; 
            padding: 1em;
            border: 1px solid #ccc;
        }
        legend {
            font-weight: bold;
        }

        form div {
            padding: 0.4em 0;
            clear: both;
        }

        /* style for  labels */
        label {
           float: left;
           width : 10em;
        }

        input {
            width: 20em;
        }

        textarea {
            width: 100%;
            height: 10em;
        }

        input.radio, input.checkbox, input.submit {
            width: auto;
        }

        #remember-me .radio {
            margin-right: 1em;
        }

        /* style form elements on focus */
        input[type="text"]:focus, textarea:focus {
            background: #ffc;
        }

        /* style for required labels */
        label .required {
            font-size: 0.75em;
            color: #760000;
        }




        /*高级设置*/
        #monthOfBirthLabel, #yearOfBirthLabel {
            text-indent : -1000em;
            width: 0;
        }

        input#dateOfBirth {
            width: 3em;
            margin-right:0.5em;
        }
        select#monthOfBirth {
            width: 10em;
            margin-right: 0.5em;
        }
        input#yearOfBirth {
            width:5em;
        }


        /*多个标签*/
        #favoriteColor {
            margin: 0;
            padding: 0;
            border: none;
            background: transparent;
        }

        #favoriteColor h2 {
            width: 10em;
            float: left;
            font-size: 1em;
            font-weight: normal;
        }

        #favoriteColor .col {
            width: 8em;
            float: left;
            clear: none;
        }

        #favoriteColor label {
            float: none;
        }

        #remember-me .radio {
            margin-right: 1em;
        }



    </style>
</head>
<body>

    <form id="comments_form" action="#" method="post">
        <fieldset>
            <legend>Your Contact Details</legend>
            <div>
                <label for="author">Name: <em class="required">(Required)</em></label>
                <input name="author" id="author" type="text" />
            </div>

            <div>
                <label for="email">Email Address:</label>
                <input name="email" id="email" type="text" />
            </div>

            <div>
                <label for="url">Web Address:</label>
                <input name="url" id="url" type="text" />
            </div>
        </fieldset>
        <fieldset>
            <legend>Comments</legend>
            <div>
                <label for="text">Message: <em class="required">(Required)</em></label>
                <textarea name="text" id="text" cols="20" rows="10"></textarea>
            </div>
        </fieldset>
        <fieldset id="remember-me">
            <legend>Remember Me</legend>
            <div>
                <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
            </div>

            <div>
                <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
            </div>

        </fieldset>



        <fieldset>
            <legend>Personal Information</legend>
            <div>
                <label for="dateOfBirth">Date of Birth:</label>
                <input name="dateOfBirth" id="dateOfBirth" type="text" />
                
                <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
                <select name="monthOfBirth" id="monthOfBirth">
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                </select>

                <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
                <input name="yearOfBirth" id="yearOfBirth" type="text" />
            </div>

            <fieldset id="favoriteColor">
                <h2>Favorite Color:</h2>
                <div class="col">
                    <div>
                        <label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />red</label>
                    </div>

                    <div>
                        <label><input class="checkbox" id="yellow" name="yellow" type="checkbox" value="yellow" />yellow</label>
                    </div>

                    <div>
                        <label><input class="checkbox" id="pink" name="pink" type="checkbox" value="pink" />pink</label>
                    </div>

                    <div>
                        <label><input class="checkbox" id="green" name="green" type="checkbox" value="green" />green</label>
                    </div>
                </div>
                <div class="col">
                    <div>
                        <label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label>
                    </div>

                    <div>
                        <label><input class="checkbox" id="purple" name="purple" type="checkbox" value="purple" />purple</label>
                    </div>

                    <div>
                        <label><input class="checkbox" id="blue" name="blue" type="checkbox" value="blue" />blue</label>
                    </div>

                    <div>
                        <label><input class="checkbox" id="other" name="other" type="checkbox" value="other" />other</label>
                    </div>
                </div>
            </fieldset>

        </fieldset>

        <div>
            <input id="submit" class="submit" name="submit" type="submit" />
        </div>

    </form>

</body>
</html>
